<template>
  <div class="inside-page">
    <div class="order content">
      <p class="detail-title">订单中心</p>
      <div class="filter">
        <span :class="[active === 1 && 'active']" @click="toSearch(1)"
          >待支付</span
        >
        <span :class="[active === 2 && 'active']" @click="toSearch(2)"
          >已完成</span
        >
      </div>
      <div class="order-choose" v-if="active === 1">
        <label>
          <input type="checkbox" v-model="checkAll" @change="changeAll" />
          <span>全选本页</span>
        </label>
        <span @click="batchPay">批量支付</span>
        <span @click="batchCancel">批量取消</span>
      </div>
      <div class="order-list">
        <div
          class="order-item"
          v-for="(v, i) in orderList"
          :key="'orderList_' + v.id"
        >
          <label>
            <input type="checkbox" v-model="v.check" />
          </label>
          <div class="top-wrap clearfix" @click="jumpTo(v.d_id)">
            <div class="logo">
              <img :src="v.images" />
            </div>
            <div class="text-wrap">
              <p class="name-wrap">
                <span class="title" :title="v.name">{{ v.name }}</span>
                <span
                  class="corner"
                  :class="[v.type === 0 ? 'online' : 'offline']"
                >
                  {{ v.type === 0 ? '线上专场' : '线下专场' }}
                </span>
              </p>
              <p class="pro">主办单位：{{ v.for_name }}</p>
              <div class="icon-wrap">
                <span class="time">
                  <i class="iconfont icon-time"></i>
                  <span>双选会时间：{{ v.start_time }} - {{ v.end_time }}</span>
                </span>
                <span class="address">
                  <i class="iconfont icon-map"></i>
                  <span v-if="v.type === 0">线上</span>
                  <span v-else>{{ v.address }}</span>
                </span>
              </div>
            </div>
            <p class="money">¥{{ v.amount }}</p>
            <div class="btn-wrap">
              <div v-if="active === 1">
                <button
                  class="confirm"
                  type="button"
                  @click.stop="submit(v.id)"
                >
                  立即支付
                </button>
                <p @click.stop="deleteOrder(v.id, i)">取消订单</p>
              </div>
              <div v-else-if="active === 2">
                <button
                  v-if="v.state === 1"
                  class="confirm"
                  type="button"
                  @click.stop="submit(v.id)"
                >
                  补开发票
                </button>
                <button
                  v-else-if="v.state === 2"
                  class="disabled"
                  type="button"
                >
                  发票已开
                </button>
                <button
                  v-else-if="v.state === 3"
                  class="disabled"
                  type="button"
                >
                  无需开票
                </button>
              </div>
            </div>
          </div>
          <div class="state">
            <p class="tips" v-if="active === 1">
              待支付报名费，请在 {{ v.push_end_time_cn }} 完成支付
            </p>
            <p class="tips" v-else-if="active === 2">订单已完成</p>
            <p class="createTime">{{ v.create_time }} 创建订单</p>
          </div>
        </div>
      </div>
    </div>
    <client-only>
      <el-dialog
        width="445px"
        :visible.sync="showConfirm"
        :show-close="false"
        custom-class="dialog-confirm"
      >
        <Confirm :info-title="infoTitle" @confirm="confirm" @cancel="cancel" />
      </el-dialog>
    </client-only>
  </div>
</template>

<script>
import { orderList, cancelOrder } from '@/api/order'
export default {
  asyncData: ({ req }) => ({
  }),
  components: {},
  data () {
    return {
      resumeTitle: '',
      checkAll: false,
      active: 1,
      orderList: [],
      orderId: '',
      orderIndex: null,
      showConfirm: false,
      infoTitle: '确认取消所选订单吗？'
    }
  },
  head () {
    return {
      titleTemplate: (titleChunk) => {
        return `${titleChunk} - 大学生找工作、找实习`;
      }
    }
  },
  created () {
    this.active = this.$route.query.active ? Number(this.$route.query.active) : 1;
    this.fetchData();
  },
  mounted () {
  },
  watch: {

  },
  computed: {

  },
  methods: {
    jumpTo (id) {
      this.$router.push({
        path: '/choice/detail',
        query: { id }
      })
    },
    toSearch (active) {
      this.checkAll = false;
      this.active = active;
      this.pageNo = 1;
      this.fetchData();
    },
    handleCurrentChange (val) {
      this.pageNo = val;
      this.fetchData();
    },
    async fetchData () {
      await orderList({
        status: this.active,
        page: this.pageNo
      }).then(res => {
        if (res.code === 200) {
          this.orderList = res.data.map(s => {
            s.check = false;
            return s;
          })
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$message.error(err || '网络错误！')
      })
    },
    deleteOrder (id, index) {
      this.orderId = id;
      this.orderIndex = index;
      this.showConfirm = true;
    },
    cancel () {
      this.showConfirm = false;
      this.orderId = '';
      this.orderIndex = null;
    },
    async confirm () { // 确认取消订单
      await cancelOrder({
        order_id: this.orderId,
      }).then(res => {
        if (res.code === 200) {
          this.showConfirm = false;
          this.$message.success(res.msg || '提交成功！');
          if (Array.isArray(this.orderIndex)) {
            const list = [];
            this.orderIndex.forEach(s => {
              list.push(this.orderList[s])
            })
            this.orderList = list;
          } else {
            this.orderList.splice(this.orderIndex, 1);
          }

          this.orderId = '';
          this.orderIndex = null;
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$message.error(err || '网络错误！')
      })
    },
    changeAll () { // 全选本页
      this.orderList = this.orderList.map(s => {
        s.check = this.checkAll;
        return s;
      })
    },
    batchPay () { // 批量支付
      const list = [];
      this.orderList.forEach(c => {
        c.check && list.push(c.id)
      });
      if (list.length === 0) {
        this.$message.warning('请选择订单！');
        return
      }
      this.submit(list.join(','))
    },
    batchCancel () { // 批量取消
      const list = [];
      const indexList = [];
      this.orderList.forEach((c, i) => {
        c.check && list.push(c.id)
        !c.check && indexList.push(i)
      });
      if (list.length === 0) {
        this.$message.warning('请选择订单！');
        return
      }
      this.showConfirm = true;
      this.orderId = list.join(',')
      this.orderIndex = indexList;
    },
    submit (ids) {
      this.$router.push({
        path: '/pay',
        query: {
          ids
        }
      });
    }
  },
}
</script>

<style lang="scss" scoped>
.inside-page {
  width: 100%;
  position: relative;
  .order {
    min-height: 500px;
    .filter {
      height: 50px;
      line-height: 50px;
      background: #f6f7f8;
      span {
        display: inline-block;
        width: 85px;
        height: 18px;
        line-height: 18px;
        font-size: 18px;
        text-align: center;
        color: #999;
        cursor: pointer;
        border-right: 1px solid #ccc;
        &.active,
        &:hover {
          color: #24292f;
        }
        &:last-child {
          border: 0;
        }
      }
    }
    input {
      height: 16px;
      width: 16px;
      margin-right: 10px;
      border: 1px solid #999;
    }
  }
  .order-choose {
    height: 60px;
    line-height: 60px;
    padding-left: 15px;
    label,
    & > span {
      font-size: 18px;
      margin-right: 50px;
      color: #999;
      &:hover {
        cursor: pointer;
        color: $base-color;
      }
    }
    label {
      input {
        cursor: pointer;
        border-color: #24292f;
      }
      span {
        color: #24292f;
      }
    }
  }
  .order-list {
    .order-item {
      position: relative;
      min-height: 170px;
      width: $base-width;
      padding: 0 30px 0 50px;
      margin-bottom: 10px;
      border: 1px solid #ebebeb;
      &:hover {
        cursor: pointer;
        background: #f6f6f6;
      }
      label {
        position: absolute;
        left: 15px;
        top: 50px;
        input {
          cursor: pointer;
          height: 16px;
          width: 16px;
          border: 1px solid #999;
        }
      }
      .top-wrap {
        min-height: 120px;
      }
      .logo {
        float: left;
        margin-top: 23px;
        height: 74px;
        width: 74px;
        overflow: hidden;
        background: #fff;
        text-align: center;
        font-size: 0;
        border: 1px solid #ebebeb;
        img {
          height: 100%;
        }
      }
      .text-wrap {
        float: left;
        width: 680px;
        margin: 23px 0 0 20px;
        position: relative;
        .name-wrap {
          width: 580px;
          line-height: 24px;
          .title {
            font-size: 18px;
            color: #24292f;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          .corner {
            vertical-align: top;
            display: inline-block;
            margin-left: 5px;
            margin-top: 5px;
            width: 70px;
            height: 22px;
            line-height: 20px;
            font-size: 12px;
            text-align: center;
            border-radius: 4px;
            &.online {
              background: rgba(71, 113, 220, 0.3);
              color: $base-color;
              border: 1px solid $base-color;
            }
            &.offline {
              background: rgba(252, 112, 62, 0.3);
              color: $base-color-important;
              border: 1px solid $base-color-important;
            }
          }
        }
        .pro {
          margin: 10px 0;
          font-size: 12px;
          color: #ccc;
        }
        .icon-wrap {
          .time,
          .address {
            margin-top: 10px;
            height: 20px;
            line-height: 20px;
            margin-right: 40px;
            i,
            span {
              margin-right: 5px;
              font-size: 14px;
              color: #999;
            }
          }
        }
      }
      .money {
        position: absolute;
        right: 300px;
        top: 42px;
        font-size: 24px;
        color: $base-color-important;
      }
      .btn-wrap {
        float: right;
        margin-top: 45px;
        button {
          display: inline-block;
          height: 30px;
          line-height: 28px;
          width: 90px;
          border: 1px solid $base-color;
          border-radius: 4px;
          font-size: 16px;
        }
        .disabled {
          background: #ccc;
          color: #fff;
          border-color: #ccc;
          &:hover {
            cursor: not-allowed;
          }
        }
        .confirm {
          background: $base-color;
          color: #fff;
          &:hover {
            background: $base-color-hover;
          }
        }
        p {
          margin-top: 10px;
          font-size: 12px;
          color: #999;
          text-align: center;
          cursor: pointer;
          &:hover {
            color: $base-color;
          }
        }
      }
      .state {
        height: 50px;
        line-height: 50px;
        padding-left: 10px;
        margin-top: 10px;
        position: relative;
        border-top: 1px solid #ebebeb;
        &::before {
          content: '';
          height: 16px;
          width: 2px;
          background: $base-color;
          position: absolute;
          left: 0;
          top: 17px;
        }
        p {
          color: #999;
        }
        .tips {
          float: left;
        }
        .createTime {
          float: right;
        }
      }
    }
  }
}
</style>
